<template>
	<view class="copy-for-select">
		<view class="cc-view-title" @click="onAddClick">
			<view class="text">抄送设置</view>
			<u-icon name="plus-circle" color="#ccc" size="40"></u-icon>
		</view>
		<view class="wrap">
			<view class="row" v-for="typeGroup in copyForDataList" :key="typeGroup.type">
				<view class="row-t">
					<view class="flex-row-between">
						<view class="copyType">{{getTypeName(typeGroup.type)}}</view>
						<u-icon name="minus-circle" color="#FF5219" size="32"
							@click="deleteCoyForItem(typeGroup.type)"></u-icon>
					</view>
				</view>
				<view class="row-c flex-row-start">
					<view class="copyItem" v-for="data in typeGroup.dataList" :key="data.id">
						<image class="copyItem-avatar" :src="data.headImageUrl" v-if="data.headImageUrl"></image>
						<view class="name">{{data.name}}</view>
						<u-icon class="copyItem-del" name="close" color="#171A1D"
							@click="deleteCoyForItem(typeGroup.type, data)" />
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="popupShow" mode="left" length="100%">
			<EditCopyForItem v-if="popupShow" style="width: 100vw; height: 100vh;" :selectedData="selectData"
				:roleList="roleList" :deptList="deptList" :postList="postList" :deptPostList="deptPostList"
				@close="onClosePopup" />
		</u-popup>
	</view>
</template>

<script>
	import EditCopyForItem from './editCopyForItem.vue';
	import {
		SysFlowCopyForType
	} from '@/utils/constant.js'
	import {
		megerList
	} from '@/utils/index.js'
	import { SysCommonBizController } from '@/api';
	export default {
		components: {
			EditCopyForItem
		},
		data() {
			return {
				popupShow: false,
				roleList: [],
				deptList: [],
				postList: [],
				deptPostList: [],
				selectData: {},
				closeIcon: require('@/static/icon/close-icon.png')
			}
		},
		methods: {
			getTypeName(type) {
				return SysFlowCopyForType.filter(v => {
					return type === v.id
				})[0].text;
			},
			updateEditCopyForItem(data) {
				console.log(data)
				let copyForType = data.type;
				// 按照抄送类型更新
				if (this.selectData[copyForType] == null) this.selectData[copyForType] = [];
				this.selectData[copyForType] = megerList(this.selectData[copyForType], data.value, 'id');
				this.selectData = {
					...this.selectData
				}
				this.onValueChange();
			},
			onValueChange() {
				let value = Object.keys(this.selectData).reduce((retObj, key) => {
					let temp = this.selectData[key];
					if (temp != null && Array.isArray(temp)) {
						retObj.push({
							type: key,
							id: temp.map(item => item.id).join(',')
						});
					}
					return retObj;
				}, []);
				this.$emit('input', value);
			},
			onClosePopup(data) {
				this.popupShow = false;
				console.log(data)
				if (data) this.updateEditCopyForItem(data);
			},
			deleteCoyForItem(type, data) {
				if (type != null && this.selectData[type] != null) {
					if (data != null) {
						this.selectData[type] = this.selectData[type].filter(item => item !== data);
					} else {
						this.selectData[type] = undefined;
					}
				}
				this.onValueChange();
			},
			onAddClick() {
				this.popupShow = true
			},
			loadSysDeptList() {
				let params = {
					widgetType: 'upms_dept',
					filter: {}
				};
				SysCommonBizController.list(this, params).then(res => {
					this.deptList = res.dataList.map(item => {
						return {
							id: String(item.deptId),
							name: item.deptName,
							...item
						};
					});
				}).catch(e => {});
			},
			loadSysPostList() {
				this.postMap = new Map();
				let params = {
					widgetType: 'upms_post',
					filter: {}
				};
				SysCommonBizController.list(this, params).then(res => {
					this.postList = res.dataList.map(item => {
						return {
							id: String(item.postId),
							name: item.postName,
							...item
						};
					});
				}).catch(e => {});
			},
			loadDeptPostList() {
				let params = {
					widgetType: 'upms_dept_post',
					filter: {}
				};
				SysCommonBizController.list(this, params).then(res => {
					this.deptPostList = res.dataList.sort((value1, value2) => {
						return value1.postLevel - value2.postLevel;
					});
				}).catch(e => {});
			},
			loadSysRoleList() {
				let params = {
					widgetType: 'upms_role',
					filter: {}
				};
				SysCommonBizController.list(this, params).then(res => {
					this.roleList = res.dataList.map(item => {
						return {
							id: String(item.roleId),
							name: item.roleName,
							...item
						}
					});
				}).catch(e => {});
			}
		},
		computed: {
			copyForDataList() {
				console.log(this.selectData);
				return Object.keys(this.selectData).map(key => {
					if (key != null && Array.isArray(this.selectData[key])) {
						return {
							type: key,
							dataList: this.selectData[key]
						}
					} else {
						return null;
					}
				}).filter(item => item != null);
			}
		},
		mounted() {
			this.loadSysRoleList();
			this.loadSysDeptList();
			this.loadSysPostList();
			this.loadDeptPostList();
		}
	}
</script>

<style lang="less">
	.copy-for-select {
		.cc-view-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.text {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.wrap {
			.row {
				border-bottom: 1px solid rgb(229, 229, 229);
				padding-bottom: 0px;
				margin-top: 32rpx;
				.row-t {
					width: 100%;
					margin-bottom: 10rpx;
				}
				.row-c {
					flex-wrap: wrap;
				}
				.copyItem {
					background: #F6F7F9;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					padding: 12rpx 24rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #171A1D;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					.copyItem-avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
					.name {
						line-height: 40rpx;
						font-size: 24rpx;
						height: 40rpx;
						color: #171a1d;
					}
					.copyItem-del{
						line-height: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>

<style>
	.u-action-sheet-item{
		color: #323233;
	}
	.u-cell{
		padding: 20rpx 32rpx !important;
	}
</style>